<template>
	<view class="home-background">
		<view class="home-swiper">
			<u-swiper @change="swiperChang" interval="5000" height="430" :list="swiper_list" keyName="img"></u-swiper>
		</view>
		<!-- <image :src="shop_data.background?shop_data.background:'/static/images/bagr.png'" class="background-image"></image> -->
		<view class="background-card">
			<view class="home-user">
				<view class="user-avatar u-skeleton-circle">
					<u-avatar border lineColor="#fff" :src="shop_data.logo||'/static/images/wdl.png'" size="65">
					</u-avatar>
				</view>
				<view class="shop-name u-skeleton-circle">{{shop_data.title}}<b class="service"
						@click="$emit('maskChang')">
						<view class="service-icon u-skeleton-circle">
							<u-icon name="more-circle" size="20" color="#000"></u-icon>
						</view>
					</b></view>
				<view class="shop-introduce u-skeleton-circle u-line-3" :class="notice_text?'show':''">{{notice_text}}</view>
				<view class="shop-notice u-skeleton-circle">
					<u-notice-bar :text="shop_data.notice||'暂无公告'" bgColor="#FFCF4F" color="#333"></u-notice-bar>
				</view>
			</view>
			<view class="home-scllor">
				<view class="scllor-coupon" @click="coupon_opne=!coupon_opne">
					<view class="coupon-left u-skeleton-circle">优惠券</view>
					<view class="coupon-right u-skeleton-circle">
						<u-icon name="arrow-right" color="#000" size="18"></u-icon>
					</view>
				</view>
				<view class="home-search">
					<view class="search-right u-skeleton-circle">
						<view class="search-icon">
							<u-icon name="search" color="#d5d5d5" size="23"></u-icon>
						</view>
						<view class="search-input">
							<u-input placeholder="搜索想看的商品名称..." border="none" v-model="keyword">
								<template #suffix>
									<view class="search-confirm" @click="searchChang">搜索</view>
								</template>
							</u-input>
						</view>
					</view>
				</view>
				<slot></slot>
			</view>
		</view>
	</view>
	<u-skelete :loading="loading" animation />
	<u-popu :value="coupon_opne" @close="coupon_opne=false" :scroll="false" mode="bottom" border-radius="50"
		height="500px">
		<view class="popu-box" @touchmove="to_chend">
			<view class="popu-totie">优惠券</view>
			<scroll-view scroll-y class="coupon_list" :style="{height:460 + 'px'}" @scrolltolower="coupBotem">
				<coupon v-for="item in coup_list" :key="item.id" :item="item" />
				<listempty mode="news" vh="300px" text="暂无优惠券" :list="coup_list" />
			</scroll-view>
		</view>
	</u-popu>
</template>

<script>
	export default {
		name: "home-info",
		props: {
			loading: {
				type: Boolean,
				default: true
			},
			swiper_list: {
				type: Array,
				default: (() => {
					return []
				})
			}
		},
		data() {
			return {
				coupon_opne: false,
				keyword: '',
				coup_page: 1,
				coup_limit: 8,
				coup_list: [],
				coup_totie: 0,
				notice_text:''
			};
		},
		mounted() {
			this.getCoupon()
		},
		methods: {
			swiperChang(e) {
				const {
					current
				} = e
				let text = this.swiper_list[current].content
				if(text){
					this.notice_text = text
				}
			},
			coupBotem() {
				if (!this.dropdown(this.coup_page, this.coup_totie)) {
					this.coup_page++
					this.getCoupon()
				}
			},
			getCoupon() {
				this.$network('/api/coupon/lists', {
					page: this.coup_page,
					limit: this.coup_limit
				}).then(res => {
					const {
						list,
						total_page
					} = res.data
					if (this.coup_page != 1) {
						this.coup_list = [...this.coup_list, ...list]
					} else {
						this.coup_list = list
					}
					this.coup_totie = total_page
				})
			},
			searchChang() {
				if (this.keyword) {
					this.multiRedirect('/subpkg/searchlist/searchlist?keyword=' + this.keyword)
				}
			},
			to_chend(e) {
				let y = e.touches[0].pageY
				if (y > 300) {
					this.coupon_opne = false
				}
			},
		}
	}
</script>

<style lang="scss">
	@import "@/static/css/home.scss";
</style>
